<template>
  <div class="personal-information base">
    <!--填资进度条-->
    <nav-bar :position="'personal'" :status="status"/>
    <div v-show="false">
      <doFaceButton ref="checkFaceInfo" />
    </div>
    <div ref="personalInfo" class="form">
      <div class="form-group">
        <label>{{ $t('maritalStatus') }}</label><!--婚姻状况-->
        <input v-model="form.civilStatus" @click="showChooseMarital" :disabled="readonly" type="text"
          :placeholder="$t('plsChoose')" readonly class="input-select val" />
      </div>

      <!--子女个数-->
      <!--      <div class="form-group">-->
      <!--        <label>{{ $t('numberOfChildren') }}</label>-->
      <!--        <input v-model="form.childrenNumber" @click="showChooseChild" :disabled="readonly" type="text" :placeholder="$t('plsChoose')" readonly-->
      <!--               class="input-select val" />-->
      <!--      </div>-->

      <!--教育水平-->
      <div class="form-group">
        <label>{{ $t('educationLevel') }}</label>
        <input v-model="form.education" @click="showChooseEducation" :disabled="readonly" type="text"
          :placeholder="$t('plsChoose')" readonly class="input-select val" />
      </div>

      <!-- 宗教 -->
      <!--      <div class="form-group">-->
      <!--        <label>{{ $t('religion') }}</label>-->
      <!--        <input v-model="form.religion" @click="showChooseReligion" :disabled="readonly" type="text" :placeholder="$t('plsChoose')" readonly-->
      <!--               class="input-select val" />-->
      <!--      </div>-->

      <!--居住地址-->
      <div class="form-group">
        <!--<label>{{ $t('monthlyIncome') }}</label>&lt;!&ndash;月收入&ndash;&gt;-->
        <!--<input v-model="form.salary" @click="showChooseIncome" :disabled="readonly" type="text" :placeholder="$t('plsChoose')" readonly class="input-select" />-->
        <label>{{ $t('residAddress') }}</label>
        <input v-model="form.region" @click="showChooseRegion" :disabled="readonly" type="text" placeholder="Region"
          readonly class="input-select val" />
      </div>
      <div class="form-group module">
        <input v-model="form.province" @click="showChooseProvince" :disabled="!form.region || readonly" id="province"
          type="text" placeholder="Province/Independent City" readonly class="input-select val" />
      </div>
      <div class="form-group module">
        <input v-model="form.city" id="city" @click="showChooseCity"
          :disabled="!form.region || !form.province || readonly" type="text" placeholder="City/Municipality" readonly
          class="input-select val" />
      </div>
      <div class="form-group module">
        <input v-model="form.address" ref="address" :disabled="readonly" type="text" placeholder="Detailed address"
          maxlength="500" class="val" @blur="handleBlurCheck($event, 'address')" />
        <p class="error-tips-new">{{ $t('plsInputCorrectAddress') }}</p>
      </div>

      <!-- 邮箱地址 -->
      <div class="form-group">
        <label>{{ $t('emailAddress') }}</label>
        <input v-model="form.email" ref="email" :disabled="readonly" type="text" :placeholder="$t('plsInput')"
          maxlength="100" class="val" @blur="handleBlurCheck" />
      </div>

      <!--手机号码-->
      <div class="form-group">
        <label>{{ $t('backupPhone') }}</label>
        <input v-model="form.phone" @focus='IdFocus' @blur="IdBlur" ref="phone" :disabled="readonly" type="text"
          :placeholder="$t('plsInput')" maxlength="11" class="val" />
        <p class="error-tips-new">{{ $t('plsInputRightMobile') }}</p>
      </div>

      <!-- 社交账号类型 -->
      <div class="form-group">
        <label>{{ $t('socialAccount') }}</label>
        <input v-model="form.socialAccountType" @click="showChooseSocialAccountType" :disabled="readonly" type="text"
          :placeholder="$t('plsChoose')" readonly class="input-select val" />
      </div>
      <div class="form-group module">
        <input v-if="form.socialAccountType" ref="socialAccount" v-model="form.socialAccount" :disabled="readonly"
          type="text"
          :placeholder="((form.socialAccountType === 'Facebook' || form.socialAccountType === 'Skype') ? $t('plsInputMobileOrEmail') : $t('plsInputMobile')) + form.socialAccountType"
          maxlength="100" class="val" @blur="handleBlurCheck" />
      </div>
    </div>

    <div class="btn-box">
      <!--      <button @click="submitHandler" :disabled="btnCanSubmit || disabledSubmit || readonly" class="submitBtn btn-ui">{{ btnName }}</button>-->
      <button @click="submitHandler" class="submitBtn btn-ui" :disabled="btnCanSubmit || disabledBtn || readonly"
        :class="{ 'isSave': $route.query.btnType === 'save' }">{{ btnName }}</button>
    </div>

    <!--地区选择框-->
    <popup v-model="isVisibleChooseRegion" position="bottom">
      <picker v-if="isVisibleChooseRegionP" show-toolbar :title="$t('residAddress')" :columns="regionData"
        value-key="region" :default-index="regionData.map(item => item.region).indexOf(form.region)"
        @cancel="isVisibleChooseRegion = false; isVisibleChooseRegionP = false;" @confirm="chooseRegion" />
    </popup>

    <!--省选择框-->
    <popup v-model="isVisibleChooseProvince" position="bottom">
      <picker v-if="isVisibleChooseProvinceP" show-toolbar :title="$t('residAddress')" :columns="provinceData"
        value-key="Province" :default-index="provinceData.map(item => item.Province).indexOf(form.province)"
        @cancel="isVisibleChooseProvince = false; isVisibleChooseProvinceP = false;" @confirm="chooseProvince" />
    </popup>

    <!--市选择框-->
    <popup v-model="isVisibleChooseCity" position="bottom">
      <picker v-if="isVisibleChooseCityP" show-toolbar :title="$t('residAddress')" :columns="cityData"
        value-key="TownCity" :default-index="cityData.map(item => item.TownCity).indexOf(form.city)"
        @cancel="isVisibleChooseCity = false; isVisibleChooseCityP = false;" @confirm="chooseCity" />
    </popup>

    <!--婚姻状况选择框-->
    <popup v-model="isVisibleChooseMarital" position="bottom">
      <picker v-if="isVisibleChooseMaritalP" show-toolbar :title="$t('maritalStatus')" :columns="maritalData"
        value-key="CivilStatus" :default-index="maritalData.map(item => item.CivilStatus).indexOf(form.civilStatus)"
        @cancel="isVisibleChooseMarital = false; isVisibleChooseMaritalP = false;" @confirm="chooseMarital" />
    </popup>

    <!--子女个数选择框-->
    <popup v-model="isVisibleChooseChild" position="bottom">
      <picker v-if="isVisibleChooseChildP" show-toolbar :title="$t('numberOfChildren')" :columns="childData"
        value-key="name" :default-index="childData.map(item => item.name).indexOf(form.childrenNumber)"
        @cancel="isVisibleChooseChild = false; isVisibleChooseChildP = false;" @confirm="chooseChild" />
    </popup>

    <!--教育水平选择框-->
    <popup v-model="isVisibleChooseEducation" position="bottom">
      <picker v-if="isVisibleChooseEducationP" show-toolbar :title="$t('educationLevel')" :columns="educationData"
        :default-index="educationData.indexOf(form.education)"
        @cancel="isVisibleChooseEducation = false; isVisibleChooseEducationP = false;" @confirm="chooseEducation" />
    </popup>

    <!--宗教选择框-->
    <popup v-model="isVisibleChooseReligion" position="bottom">
      <picker v-if="isVisibleChooseReligionP" show-toolbar :title="$t('religion')" :columns="religionData"
        :default-index="religionData.indexOf(form.religion)"
        @cancel="isVisibleChooseReligion = false; isVisibleChooseReligionP = false;" @confirm="chooseReligion" />
    </popup>

    <!--社交账号选择框-->
    <popup v-model="isVisibleChooseSocialAccountType" position="bottom">
      <picker v-if="isVisibleChooseSocialAccountTypeP" show-toolbar :title="$t('socialAccount')"
        :columns="socialAccountData" :default-index="socialAccountData.indexOf(form.socialAccountType)"
        @cancel="isVisibleChooseSocialAccountType = false; isVisibleChooseSocialAccountTypeP = false;"
        @confirm="chooseSocialAccountType" />
    </popup>

    <!--月收入选择框-->
    <!--<popup v-model="isVisibleChooseIncome" position="bottom">-->
    <!--<picker-->
    <!--show-toolbar-->
    <!--:columns="incomeData"-->
    <!--:default-index="incomeData.indexOf(form.salary)"-->
    <!--@cancel="isVisibleChooseIncome = false"-->
    <!--@confirm="chooseIncome"/>-->
    <!--</popup>-->

  </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
@import "../index";
</style>
